<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">slideTab组件</div>
			<a class="bar-button" data-href="tpl/iframe_page.html?dwz_callback=biz.iframeRender&page_title=slideTab文档&page_url=https://dwzteam.github.io/dwz_mobile_doc_v1/#/doc/h5/widget/slideTab" target="navView" rel="doc"><i class="dwz-icon-document"></i>文档</a>
		</div>
	</header>

	<section>

		<div class="dwz-slide-tab full-abs">
			<div class="hd">
				<ul>
					<li>标题1</li>
					<li>标题2</li>
					<li>标题3</li>
					<li>标题4</li>
					<li>标题5</li>
					<li>标题6</li>
					<li>标题7</li>
					<li>标题8</li>
					<li>标题9</li>
					<li>标题10</li>
				</ul>
			</div>
			<div class="bd">
				<ul>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容1
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容2
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容3
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容4
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容5
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容6
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容7
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容8
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容9
							</div>
						</div>
					</li>
					<li>
						<div class="scroll-content dwz-scroll">
							<div class="scroll">
								内容10
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</section>
</main>

<script type="text/javascript">
	function helper(tpl, params) {
		this.find('.dwz-slide-tab').slideTab({
			onSwitchSlide: ($itemBox, itemTpl, itemParams) => {
				let itemHtml = template.render(itemTpl, itemParams);
				$itemBox.html(itemHtml).initUI();
			}
		})
	}
</script>